import React, { useContext } from 'react'
import { Space, Select, Input, Cascader, Button } from 'antd'
import style from './style.module.less'
import IconSvg from '@/components/IconSvg'
import { usetApplyForAuditContext } from '../../../context'
import BottomTable from '../buttom/index'

export default () => {
  const { applyForTopConfig } = useContext(usetApplyForAuditContext)

  return (
    <div className={style.hospitalComponentBox}>
      <div className={style.top}>
        <Space>
          <Select
            style={{ width: 220 }}
            showSearch
            placeholder='请选择状态'
            optionFilterProp='children'
            onChange={applyForTopConfig.getApplyForStateValue}
            // onSearch={onSearch}
            filterOption={(input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={applyForTopConfig.auditState}
          />

          <Cascader
            style={{ width: 220 }}
            expandTrigger='hover'
            onChange={applyForTopConfig.getApplyForCityValue}
            options={applyForTopConfig.auditPrevice}
            placeholder='请选择医院所在地'
          />

          <Select
            style={{ width: 220 }}
            showSearch
            placeholder='请选择年份'
            optionFilterProp='children'
            onChange={applyForTopConfig.getApplyForYearValue}
            // onSearch={onSearch}
            filterOption={(input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={applyForTopConfig.yearSelector}
          />

          <Input
            style={{ width: 220, fontSize: 14 }}
            suffix={<IconSvg onClick={applyForTopConfig.enterApplyForInput} name='search' />}
            onChange={applyForTopConfig.getInputValue}
            onPressEnter={applyForTopConfig.enterApplyForInput}
            placeholder='搜索医院名称/申请人'
          />
        </Space>
        <div className={style.btnBox}>
          <Button onClick={applyForTopConfig.applyForExport}>
            <IconSvg name='hospitalExport' style={{ marginRight: 7 }} />
            导出数据
          </Button>
        </div>
      </div>
      <div className={style.bottom}>{<BottomTable />}</div>
    </div>
  )
}
